<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@page import="com.yaodian100.ec.member.entity.AddressBook"%>
<%@page import="java.util.List"%>
<%@page import="org.apache.commons.lang.StringUtils"%>
<%@page import="com.yaodian100.core.common.utils.ServerValue"%>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<!-- 地址选单 -->
<script type="text/javascript" charset="UTF-8" src="/genJS/yaodian_zipcode.js"></script>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.cascade.ext.js"></script>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.cascade.js"></script>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.templating.js"></script>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.alphanumeric.js"></script>
<script language="javascript">
$().ready( function() {

	var deleteId = 0;
	$(":input[id*=addrZip]").numeric();
	$(":input[id*=mobileText]").numeric();
	$(":input[id*=areaCode]").numeric();
	$(":input[id*=phoneText]").numeric();
	$(":input[id*=exteText]").numeric();
	$("#current_location").html('&nbsp;&gt;&nbsp;个人信息管理&nbsp;-&nbsp;管理收货地址簿');
	$("#m_addressBook").css("font-weight","bold");

	$("#ddialog").dialog({
		bgiframe: true,
		autoOpen: false,
		height: 50,
		width:250,
		modal: true
	});

	$("#mdialog").dialog({
		bgiframe: true,
		autoOpen: false,
		height: 50,
		width:250,
		modal: true
	});
	
	function commonTemplate(item) {
		return "<option value='" + item.Value + "'>" + item.Text + "</option>"; 
	}
	
	function commonMatch(selectedValue) {
		return this.When == selectedValue; 
	}

	function saveInput(text, abId, iName, iProvince, iCity, iDistrict, iStreet, iZip, iMobile, iAreaCode, iPhone, iExte){
		var inputCorrect = true;
		var a_msg = new Array();
		a_msg[0]="true";

		a_msg[1]="";
		if(iName == ""){
			a_msg[0]="false";
			a_msg[1]="请输入收件人姓名";
		}
		
		a_msg[2]="";
		if(iProvince == "== 选择省 =="){
			a_msg[0]="false";
			a_msg[2]=a_msg[2]+"请选择省.";
		}
		if(iCity == "== 选择城市 =="){
			a_msg[0]="false";
			a_msg[2]=a_msg[2]+"请选择城市.";
		}
		if(iDistrict == "== 选择地区 =="){
			a_msg[0]="false";
			a_msg[2]=a_msg[2]+"请选择地区.";
		}
		if(iZip == ""){
			a_msg[0]="false";
			if(a_msg[2].length!=0){a_msg[2]+="，";}
			a_msg[2]+="请输入邮编";
		}
		
		if(iStreet == ""){
			a_msg[0]="false";
			if(a_msg[2].length!=0){a_msg[2]+="，";}
			a_msg[2]+="请输入街道";
		}

		a_msg[3]="";
		if(iMobile=="" && iPhone==""){
			a_msg[0]="false";
			a_msg[3]="请至少填写一组电话";
		}
		
		if(iPhone!="" && iAreaCode==""){
			a_msg[0]="false";
			a_msg[3]="请输入区码";
		}
		
		iStreet = iStreet.replace(/，/ig,",");
		a_msg[4] = iProvince+"，"+iCity+"，"+iDistrict+"，"+iStreet+"，"+iZip;
		if(a_msg[0]=="true"){
			a_msg[5] = "";
			$.post("<%=ServerValue.getFrontContextPath()%>/member/saveAddressBook.do",{abId:abId,contactName:iName,province:iProvince,city:iCity,district:iDistrict,zipCode:iZip,addr:iStreet,mobile:iMobile,areaCode:iAreaCode,phone:iPhone,extension:iExte},
					function callback(result){
						a_msg[5] = result.split('-')[0];
						a_msg[6] = result.split('-')[1];
						saveOK(a_msg, text);},
					"json");
			return null;
		}else{
			return a_msg;
		}
	}
	
	function refreshPage(){
		var listSize = $(":tr[id*=cName]").length;
		if(listSize>=20){
			//$("#newAddr").hide();
			$("#newAddrField").hide();
		}else{
			$("#newAddr").show();
		}
		if(listSize==0 && $(":input[id*=contactName]:visible").length == 0){
			$("#noneMsg").show();
		}else{
			$("#noneMsg").hide();
		}
	}
	
	$("#newAddrField").hide();
	$("#newAddr").click(function() {
		if($(":input[id=contactName]:visible").length == 0){
			$("#noneMsg").hide();
			showAddAddressField();
		}
	});
	$("#newAddr2").click(function() {
		$("#noneMsg").hide();
		showAddAddressField();
	});

	function showAddAddressField(){
		if($(":tr[id*=cName]").length<20){
			$("#contactNameTip").hide();
			$("#addrTip").hide();
			$("#telTip").hide(); 
			$("#newAddrField").show();
			$("#province").children().each(function(){
				if ($(this).text()=="== 选择省 =="){
					$(this).attr("selected","true");
				}
			});
			$("#city").html('<option>== 选择城市 ==</option>');
			$("#district").html('<option>== 选择地区 ==</option>');
			$("#contactName").attr('value','');
			$("#addrZip").attr('value','');
			$("#addrText").attr('value','');
			$("#mobileText").attr('value','');
			$("#areaCode").attr('value','');
			$("#phoneText").attr('value','');
			$("#exteText").attr('value','');
		}else{
			$("#dialog_msg").text('最多可保存20个收货地址');
			$("#mdialog").dialog('open');
		}
	}
	
	jQuery("#city").cascade("#province",{					
		list : cityArray,				
		template: commonTemplate,
		match: commonMatch 
	}).bind("loaded.cascade",function(e,target) { 
		jQuery(this).prepend("<option value='' selected='true'>== 选择城市 ==</option>");
		//jQuery(this).find("option:first")[0].selected = true;
	});
	jQuery("#district").cascade("#city",{					
		list: districtArray,
		template: commonTemplate,
		match: commonMatch 
	}).bind("loaded.cascade",function(e,target) { 
		jQuery(this).prepend("<option value='' selected='true'>== 选择地区 ==</option>");
		//jQuery(this).find("option:first")[0].selected = true;
	});
	
	$.each(provinceArray,function(index, item){
		$("select:contains('== 选择省 ==')").append("<option value='" + item.Value + "'>" + item.Text + "</option>");
	});

	$(":a[id*=m_]").each(function(){
		var text = $(this).attr('id').split('_')[1];
		jQuery("#city"+text).cascade("#province"+text,{					
			list : cityArray,				
			template: commonTemplate,
			match: commonMatch 
		}).bind("loaded.cascade",function(e,target) { 
			jQuery(this).prepend("<option value='' selected='true'>== 选择城市 ==</option>");
			//jQuery(this).find("option:first")[0].selected = true;
		});
		jQuery("#district"+text).cascade("#city"+text,{					
			list: districtArray,
			template: commonTemplate,
			match: commonMatch 
		}).bind("loaded.cascade",function(e,target) { 
			jQuery(this).prepend("<option value='' selected='true'>== 选择地区 ==</option>");
			//jQuery(this).find("option:first")[0].selected = true;
		});
	});
	
	$(".mtr").hide();
	
	function saveOK(inputResult, text){
		if(text!=""){
			if(inputResult[5]=="error"){
				$("#addrTip"+text).text(inputResult[6]);
				$("#addrTip"+text).show();
			}else{
				var tmp = $("#exteText"+text).attr('value');
				if(tmp!=""){
					tmp = "#"+tmp;
				}
				$("#cName"+text).text($("#contactName"+text).attr('value'));
				$("#addr"+text).text(inputResult[4]);
				$("#mobile"+text).text($("#mobileText"+text).attr('value'));
				if($("#phoneText"+text).attr('value')!=""){
					$("#phone"+text).text($("#areaCode"+text).attr('value')+'-'+$("#phoneText"+text).attr('value')+tmp);
				}else{
					$("#phone"+text).text("");
				}
				$("#listADBook"+text).show();
				$("#modifyADBook"+text).hide();
			}
		}else{
			if(inputResult[5]=="error"){
				$("#addrTip").text(inputResult[6]);
				$("#addrTip").show();
			}else{
				$("#newAddrField").hide();
				var tmp = $("#exteText").attr('value');
				if(tmp!=""){
					tmp = "#"+tmp;
				}
				var phone;
				if($("#phoneText").attr('value')!=""){
					phone = $("#areaCode").attr('value')+'-'+$("#phoneText").attr('value')+tmp;
				}else{
					phone = "";
				}
				$('<tr id="listADBook'+inputResult[6]+'">'+
			            '<td id="cName'+inputResult[6]+'">'+$("#contactName").attr('value')+'</td>'+
			            '<td><p id="addr'+inputResult[6]+'">'+inputResult[4]+'</p></td>'+
			            '<td>'+
			            	'<p>手机：<span id="mobile'+inputResult[6]+'">'+$("#mobileText").attr('value')+'</span></p>'+
			            	'<p>固定：<span id="phone'+inputResult[6]+'">'+phone+'</span></p>'+
			            '</td>'+
			            '<td><input type="hidden" id="abId'+inputResult[6]+'" value="'+inputResult[6]+'" /><a href="javascript:;" id="m_'+inputResult[6]+'" class="addr_modify" >修改</a> | <a href="javascript:;" id="d_'+inputResult[6]+'" class="addr_delete">删除</a></td>'+
			          '</tr>'+
						'<tr id="modifyADBook'+inputResult[6]+'" class="mtr" style="display:none;">'+
			            '<td><input type="text" id="contactName'+inputResult[6]+'" size="10" maxlength="20"/><span id="contactNameTip'+inputResult[6]+'" class="msg rn">请填写收货人</span></td>'+
			            '<td>'+
			            	'<p class="LH-2">'+
			                	'省份：<select id="province'+inputResult[6]+'" class="c-prov"><option>== 选择省 ==</option></select>'+
			                	'市：<select id="city'+inputResult[6]+'" ><option>== 选择城市 ==</option></select><br />'+
			                	'区：<select id="district'+inputResult[6]+'" ><option>== 选择地区 ==</option></select>'+
								'邮编：<input type="text" id="addrZip'+inputResult[6]+'" size="6" maxlength="6"><br />街道：<INPUT size="50"  id="addrText'+inputResult[6]+'" maxlength="100"/><br />'+
								'<span id="addrTip'+inputResult[6]+'" class="msg rn"></span>'+
			                '</p></td><td>'+
			            	'<p>手机：<input type="text" id="mobileText'+inputResult[6]+'" size="15" maxlength="11"/></p>'+
			            	'<p>固定：<input type="text" id="areaCode'+inputResult[6]+'" maxlength="4" style="width:1.8em;" />-<input type="text" id="phoneText'+inputResult[6]+'" maxlength="8" style="width:4.2em" />分机<input type="text" id="exteText'+inputResult[6]+'" maxlength="8" style="width:2.3em" /></p>'+
			            	'<span id="telTip'+inputResult[6]+'" class="msg rn">请至少填写一组电话</span>'+
			            '</td>'+
			            '<td><a href="javascript:;" id="s_'+inputResult[6]+'" class="addr_save">提交</a> | <a href="javascript:;" id="c_'+inputResult[6]+'" class="addr_cancel">取消</a></td>'+
			          '</tr>').insertAfter($("#adbook tr:eq(2)"));
				$.each(provinceArray,function(index, item){
					$("#province"+inputResult[6]).append("<option value='" + item.Value + "'>" + item.Text + "</option>");
				});
				jQuery("#city"+inputResult[6]).cascade("#province"+inputResult[6],{					
					list : cityArray,				
					template: commonTemplate,
					match: commonMatch 
				});
				jQuery("#district"+inputResult[6]).cascade("#city"+inputResult[6],{					
					list: districtArray,
					template: commonTemplate,
					match: commonMatch 
				});
				$("#m_"+inputResult[6]).click(function(){maddressbookModify($(this).attr("id").split("_")[1]);});
				$("#d_"+inputResult[6]).click(function(){maddressbookDelete($(this).attr("id").split("_")[1]);});
				$("#s_"+inputResult[6]).click(function(){maddressbookSave($(this).attr("id").split("_")[1]);});
				$("#c_"+inputResult[6]).click(function(){maddressCancel($(this).attr("id").split("_")[1]);});
				$("#modifyADBook"+inputResult[6]).hide();
			}
			refreshPage();
		}
	}
	
	$(".addr_modify").click(function(){maddressbookModify($(this).attr("id").split("_")[1]);});
	function maddressbookModify(text) {
		$("#contactNameTip"+text).hide();
		$("#addrTip"+text).hide();
		$("#telTip"+text).hide();
		$("#contactName"+text).attr('value',$("#cName"+text).text());
		var add = $("#addr"+text).text().split('，');
		$("#province"+text).children().each(function(){
			if ($(this).text()==add[0]){
				$(this).attr("selected","true");
			}
		});
		$("#city"+text).html('');
		$.each(cityArray,function(index, item){
			if ( item.When == add[0] ){
				$("#city"+text).append("<option value='" + item.Value + "'>" + item.Text + "</option>");
			}
		});
		$("#city"+text).children().each(function(){
			if ($(this).text()==add[1]){
				$(this).attr("selected","true");
			}
		});

		$("#district"+text).html('');
		$.each(districtArray,function(index, item){
			if ( item.When == add[1] ){
				$("#district"+text).append("<option value='" + item.Value + "'>" + item.Text + "</option>");
			}
		});
		$("#district"+text).children().each(function(){
			if ($(this).text()==add[2]){
				$(this).attr("selected","true");
			}
		});
		
		$("#addrText"+text).attr('value',add[3]);
		$("#addrZip"+text).attr('value',add[add.length-1]);
		var phone = $("#phone"+text).text().split('#');
		var area = phone[0].split('-');
		$("#mobileText"+text).attr('value',$("#mobile"+text).text());
		$("#areaCode"+text).attr('value',area[0]);
		$("#phoneText"+text).attr('value',area[1]);
		$("#exteText"+text).attr('value',phone[1]);
		$("#listADBook"+text).hide();
		$("#modifyADBook"+text).show();
	}

	$(".addr_delete").click(function(){maddressbookDelete($(this).attr("id").split("_")[1]);});
	function maddressbookDelete(text) {
		deleteId = text;
		$("#ddialog").dialog('open');
	}

	$(".addr_save").click(function(){maddressbookSave($(this).attr("id").split("_")[1]);});
	function maddressbookSave(text) {
		$("#contactNameTip"+text).hide();
		$("#addrTip"+text).hide();
		$("#telTip"+text).hide();
		var inputResult = saveInput(text, $("#abId"+text).attr('value'),$("#contactName"+text).attr('value'),$("#province"+text).find('option:selected').text(),$("#city"+text).find('option:selected').text(),$("#district"+text).find('option:selected').text(),$("#addrText"+text).attr('value'),$("#addrZip"+text).attr('value'),$("#mobileText"+text).attr('value'),$("#areaCode"+text).attr('value'),$("#phoneText"+text).attr('value'),$("#exteText"+text).attr('value'));
		
		if(inputResult!=null && inputResult[0]=="false"){
			if(inputResult[1]!=""){
				$("#contactNameTip"+text).show();
			}
			if(inputResult[2]!=""){
				$("#addrTip"+text).text(inputResult[2]);
				$("#addrTip"+text).show();
			}
			if(inputResult[3]!=""){
				$("#telTip"+text).text(inputResult[3]);
				$("#telTip"+text).show();
			}
		}
	}
	
	$(".addr_cancel").click(function(){maddressCancel($(this).attr("id").split("_")[1]);});
	function maddressCancel(text) {
		$("#listADBook"+text).show();
		$("#modifyADBook"+text).hide();
	}

	$("#add_cancel").click(function() {		
		$("#newAddrField").hide();
		refreshPage();
	});
	
	$("#add_save").click(function() {
		$("#contactNameTip").hide();
		$("#addrTip").hide();
		$("#telTip").hide();	
		var inputResult = saveInput("", -1, $("#contactName").attr('value'),$("#province").find('option:selected').text(),$("#city").find('option:selected').text(),$("#district").find('option:selected').text(),$("#addrText").attr('value'),$("#addrZip").attr('value'),$("#mobileText").attr('value'),$("#areaCode").attr('value'),$("#phoneText").attr('value'),$("#exteText").attr('value'));
		if(inputResult!=null && inputResult[0]=="false"){
			if(inputResult[1]!=""){
				$("#contactNameTip").show();
			}
			if(inputResult[2]!=""){
				$("#addrTip").text(inputResult[2]);
				$("#addrTip").show();
			}
			if(inputResult[3]!=""){
				$("#telTip").text(inputResult[3]);
				$("#telTip").show();
			}
		}
	});

	$("#delete_cancel").click(function(){
		$("#ddialog").dialog('close');
	});

	
	$("#msg_ok").click(function(){
		$("#mdialog").dialog('close');
	});
	
	$("#delete_commit").click(function(){
		$("#ddialog").dialog('close');
		$.post("<%=ServerValue.getFrontContextPath()%>/member/deleteAddressBook.do",{abId:deleteId},delcallback,"json");
		function delcallback(result){
			if(result=='success'){
				$("#modifyADBook"+deleteId).remove();
				$("#listADBook"+deleteId).remove();
				$("#dialog_msg").text('资料已删除！');
				refreshPage();
			}else{
				$("#dialog_msg").text('删除失败！');
			}
			$("#mdialog").dialog('open');
		}
	});
	
	refreshPage();
});
</script>
</head>
<body>
<%
AddressBook abook = new AddressBook();
@SuppressWarnings("unchecked")
List<AddressBook> abList = (List)request.getAttribute("abList");
%>
  <div class="content mb-drawmoney">
  	<h2>管理收货地址簿</h2>
      <h3><a href="javascript:;" class="f-rt txt-s a-blue" id="newAddr">添加新的收货地址</a>我已有的收货地址</h3>
        <table width="100%" border="0" class="tb-2" id="adbook">
          <tr>
            <th width="90">收货人</th>
            <th>地址</th>
            <th width="210">联系电话</th>
            <th width="70">操作</th>
          </tr>
		  <tr id="noneMsg" style="display:none;"><td height="30" colspan="4">您还没有添加新地址，<a class="a-blue" href="javascript:;" id="newAddr2">马上添加</a></td></tr>        
		<!-- Add Address Book -->
          <tr id="newAddrField" style="display:none;">
            <td><input name="contactName" type="text" id="contactName" size="10" maxlength="20"/><span id="contactNameTip" class="msg rn">请填写收货人</span></td>
            <td>
            	<p class="LH-2">
                	省份：<select id="province" name="province" class="c-prov"><option>== 选择省 ==</option></select> 
                	市：<select id="city" name="city"><option>== 选择城市 ==</option></select><br />
                	区：<select id="district" name="district"><option>== 选择地区 ==</option></select>
					邮编：<input type="text" name="addrZip" id="addrZip" size="6" maxlength="6"><br /> 街道：<INPUT size="50" id="addrText" value="" maxlength="100"/>
					<span id="addrTip" class="msg rn"></span>
                </p>
            </td>
            <td>
            	<p>手机：<input type="text" id="mobileText" size="15" maxlength="20"/></p>
            	<p>固定：<input type="text" id="areaCode" maxlength="10" style="width:1.8em;" />-<input type="text" id="phoneText" maxlength="20" style="width:4.2em" />分机<input type="text" id="exteText" maxlength="10" style="width:2.3em" /></p>
            	<span id="telTip" class="msg rn">请至少填写一组电话</span>
            </td>
            <td><a href="javascript:;" id="add_save">提交</a> | <a href="javascript:;" id="add_cancel">取消</a></td>
          </tr>
          
          <% 
          for(int i = 0 ; i < abList.size() ; i++){ 
			abook = abList.get(i);
          %>
          <!-- List AddressBook -->
          <tr id="listADBook<%=abook.getId() %>">
            <td id="cName<%=abook.getId() %>"><%=abook.getContactName() %></td>
            <td><p id="addr<%=abook.getId() %>"><%=abook.getProvince()%>，<%=abook.getCity()%>，<%=abook.getDistrict()%>，<%=abook.getAddr()%><%=(StringUtils.isNotBlank(abook.getZipCode())?"，"+abook.getZipCode():"")%></p></td>
            <td>
            	<p>手机：<span id="mobile<%=abook.getId() %>"><%=StringUtils.isNotBlank(abook.getMobile())?abook.getMobile():"" %></span></p>
            	<p>固定：<span id="phone<%=abook.getId() %>"><%=StringUtils.isNotBlank(abook.getPhone())?abook.getAreaCode()+"-"+abook.getPhone()+(StringUtils.isNotBlank(abook.getExtension())?"#"+abook.getExtension():""):"" %></span></p>
            </td>
            <td><input type="hidden" id="abId<%=abook.getId() %>" value="<%=abook.getId() %>" /><a href="javascript:;" id="m_<%=abook.getId() %>" class="addr_modify" >修改</a> | <a href="javascript:;" id="d_<%=abook.getId() %>" class="addr_delete">删除</a></td>
          </tr>
          
          <!-- Modify AddressBook -->
          <tr id="modifyADBook<%=abook.getId() %>" class="mtr" style="display:none;">
            <td><input type="text" id="contactName<%=abook.getId() %>" size="10" value="<%=abook.getContactName() %>" maxlength="20"/><span id="contactNameTip<%=abook.getId() %>" class="msg rn">请填写收货人</span></td>
            <td>
            	<p class="LH-2">
                	省份：<select id="province<%=abook.getId() %>" class="c-prov"><option>== 选择省 ==</option></select> 
                	市：<select id="city<%=abook.getId() %>" ><option>== 选择城市 ==</option></select><br /> 
                	区：<select id="district<%=abook.getId() %>" ><option>== 选择地区 ==</option></select>
					邮编：<input type="text" id="addrZip<%=abook.getId() %>" size="6" maxlength="6"><br />街道：<INPUT size="50"  id="addrText<%=abook.getId() %>" maxlength="100"/><br />
					<span id="addrTip<%=abook.getId() %>" class="msg rn"></span>
                </p>
            </td>
            <td>
            	<p>手机：<input type="text" id="mobileText<%=abook.getId() %>" size="15" maxlength="20"/></p>
            	<p>固定：<input type="text" id="areaCode<%=abook.getId() %>" maxlength="10" style="width:1.8em;" />-<input type="text" id="phoneText<%=abook.getId() %>" maxlength="20" style="width:4.2em" />分机<input type="text" id="exteText<%=abook.getId() %>" maxlength="10" style="width:2.3em" /></p>
            	<span id="telTip<%=abook.getId() %>" class="msg rn">请至少填写一组电话</span>
            </td>
            <td><a href="javascript:;" id="s_<%=abook.getId() %>" class="addr_save">提交</a> | <a href="javascript:;" id="c_<%=abook.getId() %>" class="addr_cancel">取消</a></td>
          </tr>
          <% } %>
        </table>
    </div>
<div id="ddialog" class="od-cancel-dailog" style="display:none;" title="管理收货地址簿">
<br /><p style="text-align:center;">确定要删除？</p><br />
<div style="text-align:center;"><a href="javascript:;" id="delete_commit" class="btn-mid">确定</a><a href="javascript:;" id="delete_cancel" class="btn-mid-gy">取消</a></div></div>
<div id="mdialog" class="od-cancel-dailog" style="display:none;" title="管理收货地址簿">
<br /><p id="dialog_msg" style="text-align:center;"></p><br />
<div style="text-align:center;"><a href="javascript:;" id="msg_ok" class="btn-mid">确定</a></div></div>
</body>
</html>